<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Welcome Title</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
        <link rel="shortcut icon" href="img/favicon.ico">
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container" style="direction: rtl;">
            <!-- start of the navigation bar -->
            <div class="navbar">
                <div class="navbar-inner">
                    <div class="container">
                        <ul class="nav pull-right">
                            <li class="divider-vertical"></li>
                            <li><a href="#">المخازن</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="#">المنتجات</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="#">الموردين</a></li>
                            <li class="divider-vertical"></li>
                            <li class="active"><a href="#">العملاء</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="#">الفواتير الوارده</a></li>
                            <li class="divider-vertical"></li>
                            <li><a href="#">الفواتير</a></li>
                            <li class="divider-vertical"></li>
                            <li><a class="brand" style="padding-left: 25px;" href="#">الرئيسيه</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- end of the navigation bar -->

            <!-- start of the photos bar -->
            <ul class="thumbnails">
                <li class="span3">
                    <a href="#" class="thumbnail">
                        <img src="http://placehold.it/260x180" width="260" height="180" alt="لحوم" title="لحوم">
                    </a>
                </li>
                <li class="span3">
                    <a href="#" class="thumbnail">
                        <img src="http://placehold.it/260x180" width="260" height="180" alt="لحوم" title="لحوم">
                    </a>
                </li>
                <li class="span3">
                    <a href="#" class="thumbnail">
                        <img src="http://placehold.it/260x180" width="260" height="180" alt="لحوم" title="لحوم">
                    </a>
                </li>
                <li class="span3">
                    <a href="#" class="thumbnail">
                        <img src="http://placehold.it/260x180" width="260" height="180" alt="لحوم" title="لحوم">
                    </a>
                </li>
            </ul>
            <!-- end of the photos bar -->

            <!-- start of the form notifications -->
            <div class="alert alert-error">
                <button class="close" data-dismiss="alert">×</button>
                <strong>خطأ!</strong> يجب أدخال سعر الوحده.
            </div>
            <div class="alert">
                <button class="close" data-dismiss="alert">×</button>
                <strong>تحذير!</strong> يجب أدخال سعر الوحده.
            </div>
            <div class="alert alert-success">
                <button class="close" data-dismiss="alert">×</button>
                تم بنجاح
            </div>
            <!-- end of the form notifications -->

            <!-- start of the form -->
            <form class="form-inline" action="#" method="post">
                <label style="padding-right: 200px; padding-left: 10px;" for="select01">المنتج</label>
                <select id="select01">
                    <option>المنتج</option>
                    <option>المنتج</option>
                    <option>المنتج</option>
                    <option>المنتج</option>
                    <option>المنتج</option>
                </select>
                <label style="padding: 10px;" for="select02">المصنع</label>
                <select id="select02">
                    <option>المصنع</option>
                    <option>المصنع</option>
                    <option>المصنع</option>
                    <option>المصنع</option>
                    <option>المصنع</option>
                </select>
                <label style="padding: 10px;" for="select03">البلد</label>
                <select id="select03">
                    <option>البلد</option>
                    <option>البلد</option>
                    <option>البلد</option>
                    <option>البلد</option>
                    <option>البلد</option>
                </select>
                <div class="clear"></div>
                <label style="padding-right: 100px; padding-left: 10px;" for="input01">الكميه</label>
                <input id="input01" type="number" required="required"><span class="label label-info" style="margin-right: 10px;">كجم</span>
                <label style="padding: 10px;" for="input02">العدد</label>
                <input id="input02" type="number" required="required">
                <label style="padding: 10px;" for="input03">سعر الوحده</label>
                <input id="input03" type="number" required="required">
                <label style="padding: 10px;">الإجمالى</label>
                <span class="label label-info">200</span>
                <div class="clear"></div>
                <button style="margin-right: 560px;" class="btn btn-primary" type="submit">اضف</button>
            </form>
            <!-- end of the form -->

            <!-- start of the table -->
            <table class="table table-condensed table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>المصنع</th>
                        <th>الدوله</th>
                        <th>الكميه</th>
                        <th>سعر الوحده</th>
                        <th>الأجمالى</th>
                        <th>تعديلات</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>المصنع</td>
                        <td>الدوله</td>
                        <td>الكميه</td>
                        <td>سعر الوحده</td>
                        <td>الأجمالى</td>
                        <td><a href="#" title="حذف"><i class="icon-remove"></i>حذف</a> <a href="#" title="تعديل"><i class="icon-edit"></i>تعديل</a></td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>المصنع</td>
                        <td>الدوله</td>
                        <td>الكميه</td>
                        <td>سعر الوحده</td>
                        <td>الأجمالى</td>
                        <td><a href="#" title="حذف"><i class="icon-remove"></i>حذف</a> <a href="#" title="تعديل"><i class="icon-edit"></i>تعديل</a></td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>المصنع</td>
                        <td>الدوله</td>
                        <td>الكميه</td>
                        <td>سعر الوحده</td>
                        <td>الأجمالى</td>
                        <td><a href="#" title="حذف"><i class="icon-remove"></i>حذف</a> <a href="#" title="تعديل"><i class="icon-edit"></i>تعديل</a></td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>المصنع</td>
                        <td>الدوله</td>
                        <td>الكميه</td>
                        <td>سعر الوحده</td>
                        <td>الأجمالى</td>
                        <td><a href="#" title="حذف"><i class="icon-remove"></i>حذف</a> <a href="#" title="تعديل"><i class="icon-edit"></i>تعديل</a></td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>المصنع</td>
                        <td>الدوله</td>
                        <td>الكميه</td>
                        <td>سعر الوحده</td>
                        <td>الأجمالى</td>
                        <td><a href="#" title="حذف"><i class="icon-remove"></i>حذف</a> <a href="#" title="تعديل"><i class="icon-edit"></i>تعديل</a></td>
                    </tr>
                </tbody>
            </table>
            <!-- end of the table -->
        </div>
    </body>
</html>